<template>
  <!-- 
		以后 uni 项目中一个页面就是一个.vue
		.vue 相当于之前.wxml .wxss .js  缺一个.json

		.vue 中大部分是之前的 vue2 语法   但不完全是
			1. template   中有   小程序的标签
			2. script     中有   onLoad钩子
			3. style      中有   rpx 单位

		结论: 要想学会 uniapp 框架 需要 vue2 + 微信小程序同时写代码
	 -->
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view>999999</view>
    <view>
      <text class="title">{{ title }}</text>
    </view>

    <!-- 测试 scss -->
    <view class="father">
      <view class="son"></view>
    </view>

		<!-- 测试uni-ui组件库  下载=>配置=>使用 -->
		<uni-badge text="1"></uni-badge>
		<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
		<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
    }
  },
  onLoad() {},
  methods: {},
}
</script>

<style lang="scss">
// 定义 scss 变量
$color: teal;

.father {
  width: 400rpx;
  height: 400rpx;
  background-color: #8df;

  .son {
    width: 200rpx;
    height: 200rpx;
    background-color: $color;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
